<template>
  <el-upload
    ref="upload"
    v-bind="$attrs"
    v-on="$listeners"
    class="upload-demo"
    :action="$attrs.action"
    :multiple="$attrs.multiple"
    :auto-upload="$attrs.autoUpload"
    :accept="($attrs.accept ? $attrs.accept :accept)"
    :on-change="handProgress"
    :show-file-list="false"
    :limit="$attrs.limit"
  >
    <el-input v-model="fieldValue" style="width: 70%; float: left; margin-right: 10px" :disabled="true" ></el-input>

    <el-button slot="trigger" size="medium" type="primary">上传图片</el-button>
    <el-button size="medium" type="warning" style="margin-left: 10px" @click="checkInput">网络图片</el-button>
    <el-button size="medium" type="success" @click="selectPicture">选择图片</el-button>
    <div slot="tip" class="xdh-form-upload__tip">最多上传{{$attrs.limit}}张</div>
    <ul class="el-upload-list el-upload-list--picture-card" style="display:block;margin-top:10px;" v-if="imageUrl.length">
      <li class="el-upload-list__item is-ready" v-for="(item,inx) in imageUrl" :key="inx">
        <img :src="item.url" alt="" class="el-upload-list__item-thumbnail"  />
        <span class="el-upload-list__item-actions" >
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span class="el-upload-list__item-delete" @click="handleRemove(item)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </li>
    </ul>
    <div v-else class="el-upload el-upload--picture-card" style="display:block;margin-top:10px;">
      <i class="el-icon-picture"></i>
    </div>
  </el-upload>
</template>
<script>
export default {
  name: "uploadImages",
  props: {
    value: {
      type: [String, Number],
      default() {
        return "";
      },
    },
    uploadText: {
      type: String,
      default: "点击上传",
    },
    selectText: {
      type: String,
      default: "选取文件",
    },
    submitText: {
      type: String,
      default: "上传到服务器",
    },
    tipText: {
      type: String,
      default: "只能上传jpg/png文件，且不超过500kb",
    },
    size: {
      type: String,
    },
    imageUrl: {
      type: Array,
      default: () => [],
    },
  },
  data(){
      return {
          accept:'.bmp,.jpg,.png,.tif,.gif,.pcx,.tga,.exif,.fpx,.svg,.psd,.cdr,.pcd,.dxf,.ufo,.eps,.ai,.raw,.WMF,.webp'
      }
  },
  computed: {
    fieldValue: {
      get() {
        return this.value;
      },
      set(val) {},
    },
  },
  methods: {
    handlePictureCardPreview(file) {
      console.log(file);
      this.$emit("handlePictureCardPreview", file);
    },
    handleRemove(file, fileList) {
      this.$emit("handleRemove", file, fileList);
    },
    handProgress(file, fileList) {
      file.raw.flag = 1;
      this.$emit("handProgress", file, fileList);
    },
    selectPicture() {
      this.$emit("selectPicture");
    },
    checkInput() {
      this.$emit("checkInput");
    }
  },
};
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.uplode-input-singleImage {
  text-indent: 99999px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 100;
  opacity: 0;
}
</style>